'use server';
import { Flex, Menu } from 'antd';
import './index.css';
import React from 'react';
import Title from 'antd/es/typography/Title';
import Sider from 'antd/es/layout/Sider';
import { Content } from 'antd/es/layout/layout';
import QuestionDetail from '@/components/QuestionDetail';
import Link from 'next/link';
import { queryBankDetailByIdUsingGet } from '@/api/BankApi';
import { queryQuestionVoByIdUsingGet } from '@/api/QuestionApi';

/**
 * 题库题目详情
 * @constructor
 */
export default async function BankQuestionPage({ params }) {
  const { bankId, questionId } = params;
  // 获取题库详情
  let bank = undefined;
  try {
    const res = await queryBankDetailByIdUsingGet({
      id: bankId,
    });
    bank = res.data;
  } catch (e) {
    console.error('获取题目详情失败:', e);
  }

  if (!bank) {
    return <div>获取题库详情失败，请刷新重试</div>;
  }

  // 获取题目详情
  let question = undefined;
  try {
    const questionRes = await queryQuestionVoByIdUsingGet({
      id: questionId,
    });
    question = questionRes.data;
  } catch (e) {
    console.log('获取题目详情失败' + e);
  }

  if (!question) {
    return <div>获取题目详情失败，请刷新重试</div>;
  }

  // 题目列表转左侧菜单对象
  const questionMenuItemList = (bank.questionList || []).map((q) => {
    return {
      label: <Link href={`/bank/${bankId}/question/${q.id}`}>{q.title}</Link>,
      key: q.id,
    };
  });

  return (
    <div id="bank-question-page">
      <Flex gap={24}>
        <Sider width={240} theme="light" style={{ padding: '24px 0' }}>
          <Title level={4} style={{ padding: '0 20px' }}>
            {bank.title}
          </Title>
          <Menu items={questionMenuItemList} selectedKeys={question.id} />
        </Sider>
        <Content>
          <QuestionDetail question={question} />
        </Content>
      </Flex>
    </div>
  );
}
